<template>
      <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="payDlg"
      width="40%"
    >
    <el-button @click="toPay(1)">支付宝</el-button>
    <el-button @click="toPay()">微信</el-button>
      </el-dialog>
</template>

<script lang="ts">
import { payOrder,orderStatusQuery } from "/@/api/order";
import router from '/@/router'

export default {
  props: {
    orderId: String,
    value:{
        type: Boolean,
        default:false,
    }
  },
  data() {
    return {
        payDlg:false,
    };
  },
  mounted(){
      this.payDlg = this.value;
  },
  watch:{
      value(val){
         this.payDlg = val;
      },
      payDlg(val){
          this.$emit('input',val)
      }
  },
  methods: {
     
  async toPay (payChannel) {
    let formString = '';
       
    try {
      formString = await payOrder({ orderId: this.orderId, payChannel: payChannel });
      let routerData = router.resolve({name:'payPage',query:{form:formString.jumpUrl}});
      window.open(routerData.href, '_ blank');
   
      // window.open('/payPage?count=1' ,'about:blank');
      this.payDlg =false;
      this.comfirmPay()
    } catch (error) {
        console.log(error)
    }
    //   
      // weixin=2
    },
    comfirmPay() {
          this.$confirm('订单是否已支付完成，如无跳转新标签，请检查浏览器是否拦截', '提示', {
          confirmButtonText: '已支付',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderStatusQuery({orderId:this.orderId}).then((res) => {
           if(res.tradeSuccess) {
              router.push({name:'order-userOrders'})
           } else {
             this.$message({
               type:'waring',
               message:"当前订单未支付完成"
             })
           }
           
          }).catch(()=>{});
        }).catch(() => {
                   
        });
    }
  },
};

</script>

<style lang="scss" scoped>
</style>